<script setup lang="ts">
  import { ref } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import { Tabbar, usePageStore } from "/@/store/modules/page";
  const pageStore = usePageStore();
  const tabbar = pageStore.tabbar;
  const route = useRoute();
  const router = useRouter();
  tabbar.forEach((item) => {
    if (item.path === route.path) {
    }
  });
  const active = ref<number | string>("home");
  const onClick = (tab: Tabbar) => {
    router.replace({ path: tab.path });
    active.value = tab.name;
  };
  function handleChange(activeItem: number | string) {
    active.value = activeItem;
  }
</script>

<template>
  <van-tabbar
    v-model="active"
    active-color="#000000"
    inactive-color="#000000"
    placeholder
    @change="handleChange(active)"
  >
    <van-tabbar-item v-for="item in tabbar" :key="item.name" :name="item.name" @click="onClick(item)">
      <span class="text-sm" :class="[item.name === active ? 'font-bold' : '']">{{ item.title }}</span>

      <template #icon="props">
        <img
          :src="getAssetsImageUrl(props.active ? item.activeImg : item.normalImg)"
          style="width: 34px; height: 34px"
        />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<style scoped>
  .w100 {
    width: 750px;
  }
</style>
